<template>
	<view class="content">
		<view class="tabber_box flexs1">
			<view  class="tabber_item" :class="typeIndex== 0?'chooseactive':''" @click="typeTop(0)">
				<view>站内消息</view>
				<view class="title_line" :style="typeIndex == 0?'':'display:none'"></view>
			</view>
			<view  class="tabber_item" :class="typeIndex== 1?'chooseactive':''" @click="typeTop(1)">
				<view>我的点赞</view>
				<view class="title_line" :style="typeIndex == 1?'':'display:none'"></view>
			</view>
			<view  class="tabber_item" :class="typeIndex== 2?'chooseactive':''" @click="typeTop(2)">
				<view>我的资讯</view>
				<view class="title_line" :style="typeIndex == 2?'':'display:none'"></view>
			</view>
			<view  class="tabber_item" :class="typeIndex== 3?'chooseactive':''" @click="typeTop(3)">
				<view>名企评价</view>
				<view class="title_line" :style="typeIndex == 3?'':'display:none'"></view>
			</view>
			<view  class="tabber_item" :class="typeIndex== 4?'chooseactive':''" @click="typeTop(4)">
				<view>课程评价</view>
				<view class="title_line" :style="typeIndex == 4?'':'display:none'"></view>
			</view>
		</view>
		<view class="list_box">
			<block v-for="(item,index) in massageList" :key="index" v-if="typeIndex == 0">
				<view class="station_item" >
					<view class="station_top">
						<view class="station_left">
							<image src="../../static/img/@zanie_dfe.png" mode=""></image>
							<view class="station_left_title">{{item.title}}</view>
						</view>
						<view class="station_right">{{item.createtime}}</view>
					</view>
					<view class="static_con">
						<rich-text :nodes="item.content"></rich-text>
					</view>
				</view>
			</block>
			<block v-for="(item,index) in mylikeList" :key="index" v-if="typeIndex == 1">
				<view class="station_item" >
					<view class="station_top">
						<view class="station_left">
							<image src="../../static/img/@zanie_dfe.png" mode=""></image>
							<view class="station_left_title">{{item.title}}</view>
						</view>
						<view class="station_right">{{item.createtime}}</view>
					</view>
					<view class="static_con">
						<rich-text :nodes="item.content"></rich-text>
					</view>
				</view>		
			</block>
			
			<block v-for="(item,index) in myquestList" :key="index" v-if="typeIndex == 2">
				<view class="station_item" >
				</view>		
			</block>
			<view class="news_tabber_box" v-if="typeIndex == 2 ||typeIndex ==3 || typeIndex ==4">
				<view class="news_tabber" :class="mytabindex==0?'newsctive':''" @click="mytab(0)">已回复</view>
				<view class="news_tabber" :class="mytabindex==1?'newsctive':''"  @click="mytab(1)">未回复</view>
			</view>
			
			<view class="none_msg" :style="falgnew!=true?'':'display:none'" v-if="typeIndex == 0">
				<image src="../../static/img/zcht_img_k@2x.2ea2159c.png" mode=""></image>
				<view class="none_title">暂无信息</view>
			</view>
			
			<view class="none_msg" :style="falgnew!=true?'':'display:none'" v-if="typeIndex == 1">
				<image src="../../static/img/zcht_img_k@2x.2ea2159c.png" mode=""></image>
				<view class="none_title">暂无信息1</view>
			</view>
			<view class="none_msg" :style="falgnew!=true?'':'display:none'" v-if="typeIndex == 2 || typeIndex ==3 || typeIndex ==4">
				<image src="../../static/img/zcht_img_k@2x.2ea2159c.png" mode=""></image>
				<view class="none_title">暂无信息2</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {newMassage,mylike,myquestion,myevaluate,Cmyevaluate} from '../../api/massage.js'
	var login;
	export default {
		data() {
			return {
				//顶部选项卡切换
				typeIndex:0,
				//选项卡切换
				mytabindex:0,
				//站内消息
				massageList:[],
				//我的点赞
				mylikeList:[],
				//我的资讯
				myquestList:[],
				//名企评价
				valueList:[],
				//课程评价
				CvalueList:[],
				//没有内容
				falgnew:true,
			}
		},
		onLoad() {
			this.newMassage()
		},
		
		methods: {
			//顶部切换
			typeTop(index){
				console.log(index)
				this.typeIndex = index
				if(index ==1){
					this.mylike()
				}else if(index ==2){
					this.myquestion()
				}else if(index ==3){
					this.myevaluate()
				}else if(index ==4){
					this.Cmyevaluate()
				}
			},
			
			//选项卡切换
			mytab(index){
				this.mytabindex = index
				if(index ==0){
					this.typeIndex ==2?this.myquestion():this.typeIndex ==3?this.myevaluate():this.typeIndex ==4?this.Cmyevaluate():''
					
				}else if(index ==1){
					this.typeIndex ==2?this.myquestion():this.typeIndex ==3?this.myevaluate():this.typeIndex ==4?this.Cmyevaluate():''
				}
			},
			//请求站内消息
			newMassage(){
				console.log("dd")
				let that = this
				newMassage().then((res)=>{
					that.massageList = res.data.data
					that.falgnew = res.data.data.length==0?false:true
				});
			},
			//请求我的点赞
			mylike(){
				let that = this
				mylike().then((res)=>{
					console.log(res.data.data.length)
					that.mylikeList = res.data.data
					that.falgnew = res.data.data.length==0?false:true
				});
			},
			//请求我的资讯
			myquestion(){
				let that = this
				myquestion().then((res)=>{
					console.log(res.data.length)
					that.myquestList = res.data
					that.falgnew = res.data.length==0?false:true
				});
			},
			//请求名企评价
			myevaluate(){
				let that = this
				myevaluate().then((res)=>{
					that.valueList = res.data
					that.falgnew = res.data.length==0?false:true
				});
			},
			//请求课程评价
			Cmyevaluate(){
				let that = this
				Cmyevaluate().then((res)=>{
					that.CvalueList = res.data
					that.falgnew = res.data.length==0?false:true
				});
			}
		}
	}
</script>

<style scoped lang="scss">
.content{
	width: 100vw;
    height: 100vh;
    overflow: auto;
	.tabber_box{
		width: 100%;
		    height: 80rpx;
		    margin: auto;
		    background-color: #fff;
		    overflow-x: scroll;
		    padding-left: 20rpx;
		    position: fixed;
		    top: 84rpx;
		    z-index: 10;
		    margin-right: 30rpx;
	}
	.chooseactive{
			width: auto;
		    font-size: 32rpx;
		    font-family: PingFang SC;
		    font-weight: 700 !important;
		    color: #333 !important;
		    margin: 0 30rpx;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			flex-shrink: 0;
			
	}
	.tabber_item{
		    width: auto;
		        font-size: 30rpx;
		        font-family: PingFang SC;
		        font-weight: 500;
		        color: #666;
		        display: flex;
		        margin: 0 30rpx;
		        justify-content: center;
		        align-items: center;
		        flex-direction: column;
		        flex-shrink: 0;
		
	}
	.title_line{
			width: 60rpx;
		    height: 4rpx;
		    background: #ffdd47;
		    border-radius: 2rpx;
		    margin-top: 4rpx;
	}
	.list_box{
		.news_tabber_box{
			width: 92%;
			    height: 56rpx;
			    margin: 0 auto;
			    background: #fff;
			    border: 1rpx solid #ffdd47;
			    border-radius: 6rpx;
			    display: flex;
			    justify-content: space-between;
			    align-items: center;
			.news_tabber{
				width: 50%;
				    display: flex;
				    justify-content: center;
				    align-items: center;
				}
			.newsctive{
				width: 50%;
				    height: 100%;
				    display: flex;
				    justify-content: center;
				    align-items: center;
				    background: #ffdd47;
			}
			
		}
		width: 100%;
		    height: auto;
		    margin-top: 100rpx;
		    padding-bottom: 30rpx;
		.station_item{
			width: 100%;
			    height: auto;
			    background-color: #fff;
			    margin-top: 20rpx;
			    padding-bottom: 20rpx;
			.station_top{
				width: 100%;
				    height: 100rpx;
				    padding: 0 30rpx;
				    border-bottom: 1rpx solid #f5f5f5;
				    display: flex;
				    justify-content: space-between;
				    align-items: center;
				.station_left{
					display: flex;
					    justify-content: flex-start;
					    align-items: center;
					image{
						width: 60rpx;
						    height: 60rpx;
					}
					.station_left_title{
						font-size: 30rpx;
						    font-family: PingFang SC;
						    font-weight: 500;
						    color: #333;
						    margin-left: 30rpx;
					}
					
				}
				.station_right{
					font-size: 22rpx;
					    font-family: PingFang SC;
					    font-weight: 500;
					    color: #999;
				}
				}
			.static_con{
				width: 100%;
				    height: auto;
				    padding: 20rpx 30rpx;
				    font-size: 28rpx;
				    font-family: PingFang SC;
				    font-weight: 500;
				    color: #333;
			}
			}
		.none_msg{
			width: 100%;
			    height: auto;
			    display: flex;
			    justify-content: center;
			    align-items: center;
			    flex-direction: column;
			    margin-top: 300rpx;
				image{
					width: 354rpx;
					    height: 252rpx;
				}
			.none_title{
				font-size: 26rpx;
				    font-family: PingFang SC;
				    font-weight: 500;
				    color: #666;
				    margin-top: 40rpx;
			}
		}
	}
}


</style>
